<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务清单设计页面</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://unpkg.com/vue@3.2.0"></script>
</head>
<body>
    <!-- 199010127吴金昔 -->
    <div id="taskList">
        <!-- 任务清单 -->
        <div id="task">
            <!-- 头部 -->
            <div class="task-header">
                <!-- 日期 -->
                <h1 class="task-header-title">{{today}}</h1>
                <div class="task-tools">
                    <div class="task-count">{{item_count}} tasks</div>
                    <!-- 选项卡 -->
                    <div class="task-filters">
                        <button :class="{task_filter:true, is_active:isAll}" @Click="goAll">All</button>
                        <button :class="{task_filter:true, is_active:isActive}" @Click="goActive">Active</button>
                        <button :class="{task_filter:true, is_active:isCompleted}" @Click="goCompleted">Completed</button>
                    </div>
                </div>
                <!-- 任务列表 -->
                <div class="task-form">
                    <input 
                        type="text" 
                        class="task-input" 
                        placeholder="Add a new task..."
                        v-model="addSome" 
                         >
                    <button 
                        class="task_button" 
                        @Click="addTask"
                        >Add Task
                    </button>
                </div>
            </div>

            <!-- 所有任务 -->
            <my-list 
            v-show="isAll"
            :items="all_items.value" 
            @abc="deleteTask"
            @abb="isFinish"
            >
            </my-list>

            <!-- 未完成的任务 -->
            <my-list 
            v-show="isActive"
            :items="active_items.value" 
            @abc="deleteTask"
            @abb="isFinish">
            </my-list>
            
            <!-- 已完成的任务 -->
            <my-list 
            v-show="isCompleted"
            :items="completed_items.value" 
            @abc="deleteTask"
            @abb="isFinish">
            </my-list>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>
</html>